import React from 'react';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';

class ActionSheet extends BaseComponent {
  state = {
    show: false,
    options: [],
    title: '请选择',
  }

  show = ({ title = '请选择', options = [] }) => {
    this.setState({
      show: true,
      title,
      options,
    });
  }

  selectOption = (e, option) => {
    e.stopPropagation();
    option.action();
  }

  close = () => {
    this.setState({ show: false });
  }

  render() {
    const { show, title, options } = this.state;
    if (!show) {
      return null;
    }
    const cells = options.map((option, index) => {
      return (
        <div className="option-cell" key={index} onClick={e => this.selectOption(e, option)}>
          {option.title}
        </div>
      );
    });
    let titleView;
    if (title) {
      titleView = <div className="title">{title}</div>;
    }
    return (
      <Modal className="action-sheet" touchFunc={this.close}>
        <div className="content">
          {titleView}
          {cells}
        </div>
      </Modal>
    );
  }
}

export default ActionSheet;
